<template>
  <el-container>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="bg-purple">
            <a href="javascript:">
              <img src="../assets/logo.png" alt="logo" class="logo" />
            </a>
          </div>
        </el-col>
        <el-col :span="6" :offset="10">
          <div class="bg-purple">
            <el-link
              style="float: right; margin-right: 80px; color: #fff"
              :underline="false"
              type="primary"
              @click="loginout"
              >退出</el-link
            >
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <div class="content">
        <el-row :gutter="20" style="padding: 0px 20px">
          <!-- 左侧 -->
          <el-col :span="5">
            <el-card>
              <div style="text-align: center; width: 100%">
                <el-avatar
                  :size="160"
                  :src="domain + userinfo.avatar"  @error="()=>true"
                  >
                  <img
                    src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                  />
                </el-avatar>
              </div>
              <div>
                {{ userinfo.username }}
                <el-link :underline="false" type="primary" href="#/user"
                  >[编辑]</el-link
                >
              </div>
              <div>最近登录IP地址:<br />{{ userinfo.per_ip }}</div>
              <div>最近登录时间:<br />{{ userinfo.per_time }}</div>
            </el-card>
          </el-col>
          <!-- 右侧 -->
          <el-col :span="17" class="person_right">
            <el-card>
              <el-row>
                <el-col :span="16">
                  <el-menu
                    :default-active="menuIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="menuSelect"
                  >
                    <el-menu-item index="1"
                      ><i class="el-icon-setting"></i>我的文章</el-menu-item
                    >
                    <el-menu-item index="2"
                      ><i class="el-icon-setting"></i>我的收藏</el-menu-item
                    >
                    <el-menu-item index="3"
                      ><i class="el-icon-menu"></i>最近访问</el-menu-item
                    >
                  </el-menu>
                </el-col>
                <el-col :span="4" :offset="4">
                  <el-link href="#/publish">
                    <el-button type="success"> 发布文章 </el-button>
                  </el-link>
                </el-col>
              </el-row>
              <div v-if="menuIndex === '1'">
                <Articlelist />
              </div>
              <div v-else-if="menuIndex === '2'">
                <Favorite />
              </div>
              <div v-else-if="menuIndex === '3'">
                <Hit />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
    <el-footer>
      <div class="text-center">
        <span>版权所有：xxxxxxxxxxxxx Copyright ©1995-2023</span>
        <a
          href="http://beian.miit.gov.cn/"
          target="_blank"
          style="margin-left: 40px; color: #709eef"
          >京ICP备xxxxxxxxx号-x</a
        >
      </div>
    </el-footer>
  </el-container>
</template>
<script>
import Favorite from "../components/favorite.vue";
import Articlelist from "../components/articlelist.vue";
import Hit from "../components/hit.vue";

export default {
  name: "",
  data() {
    return {
      token: "",
      userinfo: {},
      menuIndex: "1"
    };
  },
  components: { Favorite, Articlelist, Hit },
  computed: {},
  beforeMount() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // console.log(this.domain);
      // 是否登录
      this.token = window.sessionStorage.getItem("token");
      if (!this.token) {
        this.$router.push({ path: "/login" });
      }
      // 获取用户信息
      this.getUserInfo();
    },
    // 用户信息
    getUserInfo() {
      if (window.sessionStorage.getItem("userinfo")) {
        this.userinfo = JSON.parse(window.sessionStorage.getItem("userinfo"));
      } else {
        this.$http.get("/member/userinfo", {}, (res) => {
          if (res && res.code === 0) {
            this.userinfo = res.data;
            window.sessionStorage.setItem(
              "userinfo",
              JSON.stringify(this.userinfo)
            );
          }
        });
      }
    },
    menuSelect(index) {
      this.menuIndex = index;
    },
    // 登出
    loginout() {
      window.sessionStorage.clear();
      this.$router.push({ path: "/login" });
    }
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.el-header {
  line-height: 60px;
  background-color: #f1acac;
  .logo {
    width: 60px;
    height: 60px;
  }
}
.el-main {
  width: 1300px;
  margin: 0 auto;
  .content {
    margin-top: 30px;
    .title {
      font-size: 22px;
      line-height: 30px;

      font-weight: bold;
      padding-left: 8px;
      box-sizing: border-box;
    }
    .el-menu-demo {
      border-bottom: none;
    }
  }
}
.btn {
  padding: 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  margin-left: 20px;
  transition: 0.3s all;
}
.btn:hover {
  border: 1px solid #ff9900;
}
.border_ccc {
  padding: 20px;
  border: 1px solid #ccc;
}
.el-footer {
  color: #fff;
  line-height: 60px;
  margin-top: 60px;
  background-color: #393b3f;
}
</style>



